@use "scss/colors";
@use "scss/fonts";
@use "scss/variables";

.circle {
  height: 20px;
  width: fit-content;
  min-width: 20px;
  border-radius: variables.$border-radius-lg;
  padding: 0 4px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  &.default {
    background: colors.$dark-blue-100;
  }

  &.green {
    background: colors.$green;
  }

  &.red {
    background: colors.$red;
  }

  &.blue {
    background: colors.$blue;
  }

  &.blue--outline {
    border: variables.$border-thin solid colors.$blue;
    background: colors.$foreground;
  }

  &.grey--outline {
    border: variables.$border-thin solid colors.$grey-300;
    background: colors.$foreground;
  }
}
